<template>
    <div class="app-container">
      <div class="content">
        <div class="lgm-search">
          <el-form
            ref="form"
            :model="searchParams"
            label-width="60px"
            class="search-form"
          >
            <el-form-item label="日期">
              <el-date-picker
                v-model="searchParams.time1"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
  
            <el-row>
              <el-button
                type="success"
                class="lgm-search-btn"
                icon="el-icon-search"
                @click="seach"
                >搜索</el-button
              >
              <el-button
                class="lgm-reset-btn"
                icon="el-icon-refresh"
                @click="reset"
                >重置</el-button
              >
            </el-row>
          </el-form>
        </div>
  
        <div class="table">
          <el-table :data="dataList" border>
           
            <el-table-column
              prop="nickname"
              label="名称"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="settle_price"
              label="结算费用"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="created_at"
              label="结算时间"
              align="center"
            ></el-table-column>
            
            
           
      
          </el-table>
        </div>
        <div class="lgm-page-wrap">
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background
            :page-sizes="[10, 100, 200, 300, 400]"
            :page-size="10"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </div>
      </div>
     
    </div>
  </template>
  
  <script>
  import {
    clothing_categoryAdmin,
    styleAdmin,
    colorAdmin,
    sizeAdmin,
    settle_log,
  } from "@/api/admin";
  
  export default {
    name: "StyleManage",
    data() {
      return {
        page: 1,
        page_size: 10,
        total: 0,
        detail: {},
        clothing_categoryAdminList: [],
        styleAdminList: [],
        sizeList: [],
        colorList: [],
  
        searchParams: {
          time1: "",
        },
        detailForm: {
          type: "1",
          money: "",
          remarks: "",
        },
        rules: {},
        srcList: [
          "https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg",
        ],
        dataList: [],
        dialogVisible: false,
      };
    },
    mounted() {
      this.settle_logFn();
    },
    methods: {
      handleSizeChange(value) {
        this.page_size = value;
        this.settle_logFn();
      },
      handleCurrentChange(value) {
        this.page = value;
        this.settle_logFn();
      },
      settle_logFn() {
        let obj = this.searchParams;
        if (this.searchParams.time1) {
          obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
          obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
        }
        delete obj.time1
        settle_log(
          {
            page: this.page,
            page_size: this.page_size,
            ...obj,
          },
          "GET"
        ).then((e) => {
          console.log(e.data.list);
          this.dataList = e.data.list;
          this.total = e.data.total;
        });
      },
      dialogConfirm() {
        console.log(this.detailForm);
        settle_log(
          this.detailForm,
          this.detailForm.id ? "PATCH" : "POST",
          this.detailForm.id
        ).then((e) => {
          this.dialogVisible = false;
          this.seach();
        });
      },
  
      seach() {
        this.page = 1;
        this.settle_logFn();
      },
      reset() {
        for (let i in this.searchParams) {
          this.searchParams[i] = null;
        }
        this.seach();
      },
  
      addList() {
        this.detailForm = {
          type: "1",
          money: "",
          remarks: "",
        };
        this.dialogVisible = true;
      },
      handleEdit(idx, item) {
        settle_log(
          {
            id: item.id,
          },
          "GET",
          item.id
        ).then((e) => {
          this.detailForm = JSON.parse(JSON.stringify(item));
  
          this.dialogVisible = true;
        });
      },
      handleDelete(index, item) {
        this.$confirm("是否确认删除选中的?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          confirmButtonClass: "submitDeleteBtn",
          type: "warning",
        }).then(() => {
          settle_log({}, "DELETE", item.id).then((e) => {
            this.seach();
          });
  
          this.$message({
            type: "success",
            message: "删除成功!",
          });
        });
      },
      colorAdminFn() {
        colorAdmin(
          {
            page: 1,
            page_size: 1000,
          },
          "GET"
        ).then((e) => {
          this.colorList = e.data.list;
        });
      },
      sizeAdminFn() {
        sizeAdmin(
          {
            page: 1,
            page_size: 1000,
          },
          "GET"
        ).then((e) => {
          this.sizeList = e.data.list;
        });
      },
      clothing_categoryAdminFn() {
        clothing_categoryAdmin(
          {
            page: 1,
            page_size: 1000,
          },
          "GET"
        ).then((e) => {
          this.clothing_categoryAdminList = e.data.list;
        });
      },
      styleAdminFn() {
        styleAdmin(
          {
            page: 1,
            page_size: 1000,
          },
          "GET"
        ).then((e) => {
          this.styleAdminList = e.data.list;
        });
      },
  
      
      clickItem() {
        console.log(456);
      },
      formatDate(date) {
        const d = new Date(date);
        const year = d.getFullYear();
        const month = String(d.getMonth() + 1).padStart(2, "0"); // 月份从0开始
        const day = String(d.getDate()).padStart(2, "0");
        return `${year}-${month}-${day}`;
      },
      staticdeliveryFn() {
        let obj = this.searchParams;
        if (this.searchParams.time1) {
          obj["start_time"] = this.formatDate(this.searchParams.time1[0]);
          obj["end_time"] = this.formatDate(this.searchParams.time1[1]);
        }
      },
    },
  };
  </script>
  
  <style lang="scss" scoped>
  @import "~@/styles/variables.scss";
  
  .app-container {
    .content {
      background-color: #fff;
      padding: 20px;
      border-radius: 5px;
    }
  
    .lgm-search {
      ::v-deep input {
        width: 210px;
      }
    }
  
    .info {
      display: flex;
      margin-bottom: 20px;
  
      .item {
        width: 220px;
        padding: 8px 15px;
        border: 1px solid #eee;
        border-radius: 6px;
        margin-right: 30px;
  
        .title {
          margin-bottom: 6px;
        }
  
        .box {
          width: 100%;
          height: 100px;
          border-radius: 6px;
          background-color: #fdf0e5;
          display: flex;
          align-items: center;
          justify-content: center;
          color: $fontColor;
          font-weight: bold;
          font-size: 18px;
        }
      }
    }
  }
  </style>
  